<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="业务类型" prop="bizType">
          <el-select  v-model="queryParams.bizType" filterable placeholder="请选择业务类型" clearable>
            <el-option v-for="dict in dict.type.bus_flow_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="表单标识" prop="formMarkers">
          <el-input  v-model="queryParams.formMarkers" placeholder="请输入表单标识" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="表单名称" prop="formName">
          <el-input  v-model="queryParams.formName" placeholder="请输入表单名称" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="表单类型" prop="formType">
          <el-select  v-model="queryParams.formType" placeholder="请选择表单类型" clearable>
            <el-option label="业务" :value="1"/>
            <el-option label="审批" :value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>

    <div class="card-wrap paddingAll20" :model="queryParams" ref="queryForm" label-width="86px">
      <div class="table-title-wrap justify-end">
        <el-button v-hasPermi="['formConfig:definition:add']" type="primary" size="mini" @click="addFormTemplete">新增</el-button>
      </div>
      <el-table
          v-loading="loading"
          :data="basicList"
          :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
        <template slot="empty">
          <el-empty :image-size="50" description="暂无表单信息"></el-empty>
        </template>
        <el-table-column
            align="center"
            prop="formMarkers"
            label="表单标识"
            min-width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="formName"
            label="表单名称"
            min-width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="formType"
            label="表单类型"
            min-width="180">
          <template v-slot="{row}">
            {{ row.formType == 2 ? '审批' : '业务' }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="enterpriseCertificationName"
            label="引入页面"
            min-width="180">
          <template v-slot="{row}">
            <span v-if="row.formType==1">{{ row.pageAddress }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="版本"
            prop="versions"
            min-width="180">
          <template v-slot="{row}">
            {{ row.versions || '--' }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="updateBy"
            label="更新人"
            min-width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="updateTime"
            label="更新时间"
            min-width="180">
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="left">
          <template v-slot="{ row }">
            <el-button v-hasPermi="['formConfig:definition:detail']" size="small" type="text"
                       @click="goDetail(row)">查看
            </el-button>
            <el-button v-hasPermi="['formConfig:definition:edit']" size="small" type="text"
                       @click="goEdit(row)">编辑
            </el-button>
            <!--            <el-button v-if="row.status==2" size="small" type="text"-->
            <!--                       @click="handleOperate(3,row)">启用-->
            <!--            </el-button>-->
            <!--            <el-button v-if="row.status==1" size="small" type="text"-->
            <!--                       @click="handleOperate(4,row)">禁用-->
            <!--            </el-button>-->


          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
  </div>
</template>

<script>

import * as formDefinitionApi from "@/api/formConfig/formDefinition";
import SearchContent from "@/components/SearchContent/index.vue";

export default {
  name: 'FormDefinition',
  dicts: ['bus_flow_type'],
  components: {SearchContent},
  data() {
    // 这里存放数据
    return { // 加载标识
      loading: false,
      showSearch: true,
      // 总条数
      total: 0,
      // 工单数据
      basicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bizType:null,
        formMarkers: null,
        formName: null,
        formType: null
      },
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 方法集合
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      formDefinitionApi.list(this.queryParams).then(res => {
        this.loading = false;
        this.total = res.total;
        this.basicList = res.rows;
      })
    },

    goDetail(row) {
      console.log('----row', row)
      this.$router.push({name: 'FormDetail', query: {id: row.id}})
    },
    goEdit(row) {
      this.$router.push({name: 'FormDefinitionEdit', query: {id: row.id}})
    },
    /*新增表单*/
    addFormTemplete() {
      this.$router.push({name: 'FormDefinitionAdd'})
    },
  },

  mounted() {
    this.getList();
  },
  activated() {
    this.handleQuery()
  }

}
</script>

<style lang="scss" scoped>
</style>
